import { useEffect, useState } from "react";
import RoomItem from "./RoomItem";
import { roomItemTypes } from "@/types/roomType";
import { getRoomList } from "@/api/roomApi";
import roomStore from "@/store/roomStore";
import "./roomlist.css";
import { Modal } from "antd";
const RoomList = () => {
  // const inputRef = useRef<HTMLInputElement>(null);
  const [roomRes, setRoomRes] = useState<roomItemTypes[]>([]);
  const [modalState, setModalState] = useState(false);
  const [roomId, setRoomId] = useState();
  // const searchRoom = () => {
  //   console.log(inputRef.current?.value);
  // };
  const toMyRoom = () => {
    alert("暂未实现");
  };

  useEffect(() => {
    getRoomList().then((res) => {
      setRoomRes(res.data);
    });
  }, []);
  const roomClick = (id: any) => {
    setModalState(true);
    setRoomId(id);
    localStorage.setItem("room_id", id);
    roomStore.getRoomInfo();
  };
  return (
    <>
      <div className={"room-list-box"}>
        <Modal
          visible={modalState}
          centered={true}
          title="退出提示"
          closable={false}
          onCancel={() => {
            setModalState(false);
          }}
          onOk={() => {
            setModalState(false);
            if (roomId) {
              roomStore.setRoomId(roomId);
            }
          }}
          width={"420px"}
          cancelText={"暂不退出"}
          okText={"退出房间"}
          okType={"default"}
          wrapClassName={"room-modal"}
          style={{ border: "4px", borderRadius: "#ebeef5" }}
        >
          是否确定退出当前房间
        </Modal>
        <div className={"room-box-title"}>
          <span>房间列表</span>
          <div onClick={toMyRoom}>
            <span>我的房间</span>
          </div>
        </div>
        {/* <div className={"room-box-search"}>
          <input type="text" ref={inputRef} placeholder="请输入房间id" />
          <div className={"search-btn"} onClick={searchRoom}>
            进入
          </div>
        </div> */}
        {/*列表*/}
        <div className={"room-box-body"}>
          {roomRes.map((item, index) => {
            return (
              <RoomItem
                {...item}
                click={roomClick}
                key={item.room_id + "room_id"}
              />
            );
          })}
        </div>
      </div>
    </>
  );
};
export default RoomList;
